<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="CampusOcerviewDiv">
    <!-- 头部组件 -->
    <TopCom />
    <CampusOverviewBoxCom>
      <CampusOverviewLeft>
        <div id="letfTop">
          <!-- 左侧标题组件 -->
          <LeftTop_topCom>
            <span>环境检测 ......</span>
          </LeftTop_topCom>
          <div id="letfTop_bottom">
            <!-- 图表 -->
            <div style="width: 100%;">
              <div style="display: flex;justify-content: space-between;">
                <div style="">
                  <span style="padding-left:.5rem;font-size: 0.3rem;">{{aboutTemperature.nighttemp}}℃</span>
                  <span style="font-size: 0.3rem;">~ {{aboutTemperature.temperature}}℃</span>
                </div>
                <div>
                  <img style="margin-top: 0.05rem;" src="../../../img/icon/太阳.jpg" alt="">
                  <text style="color: yellow;font-size: 0.2rem;">高温黄色预警</text>
                </div>
              </div>
            </div>
            <TemperatureEcharts/>
            <div
              style=" height:1rem;width: 90%; background-color: rgb(255, 255, 255 ,0.1);margin-top: 0.15rem;margin-left: 5%;">
              111
            </div>

          </div>
        </div>
        <div id="leftBottom">
          <!-- 左侧标题组件 -->
          <LeftTop_topCom>
            <span>学生分布情况 ......</span>
          </LeftTop_topCom>
          <div id="leftBottom_bottom">
            <!-- 图表 -->
            <Rhcart1 />
          </div>
        </div>
      </CampusOverviewLeft>
      <!-- 中间盒子组件 -->
      <CampusOverviewContentCom>
        <div>
          <!-- 动画组件 -->
          <animationCom1></animationCom1>
        </div>

      </CampusOverviewContentCom>

      <CampusOverviewRight>
        <div id="rightTop">
          <!-- 右侧标题组件 -->
          <RightTop_topCom>
            <span>水电用量 .....</span>
          </RightTop_topCom>

          <div id="rightTop_bottom">
            <div style="display: flex;flex-direction: column;">
              <div style="display: flex;justify-content: space-between">
                <div style="width: 3rem;height: 0.5rem;border: 1px solid #fff;display: flex;align-content:center ;">
                  <img src="../../../img/icon/电池.jpg" alt="">
                  <text>总用电量72670</text>

                </div>
                <div style="width: 3rem;height: .5rem;border: 1px solid #fff;display: flex;align-content:center ;">
                  <img src="../../../img/icon/颜色水滴.jpg" alt="">
                  <text>总用水量69035</text>

                </div>
              </div>
              <div>
                <!-- 图表组件 -->
                <Ehcart />
              </div>
            </div>
          </div>
        </div>
        <div id="rightBottom">
          <RightTop_topCom>
            <span>校园人员流动情况 .....</span>
          </RightTop_topCom>

          <div id="rightBottom_bottom">
            <div style="display: flex;flex-direction: column;">
              <div style="display: flex;justify-content: space-between">
                <div
                  style="width: 3rem;height: 0.5rem;display: flex;align-content:center ;justify-content: space-between;">
                  <img src="../../../img/icon/紫人.jpg" alt="">
                  <div style="display: flex;flex-direction: column;">
                    <text>1</text>
                    <text>昨日来访客</text>
                  </div>

                </div>
                <div
                  style="width: 3rem;height: 0.5rem;display: flex;align-content:center ;justify-content: space-between;">
                  <img src="../../../img/icon/绿人.jpg" alt="">
                  <div style="display: flex;flex-direction: column;">
                    <text>1</text>
                    <text>今日来访客</text>
                  </div>

                </div>
              </div>
              <div>
                <Ehcart2 />
              </div>
            </div>
          </div>
        </div>
      </CampusOverviewRight>
    </CampusOverviewBoxCom>
    <CampusOvuerviewBottomCom>

    </CampusOvuerviewBottomCom>
  </div>
</template>
<script lang="ts" setup>
import CampusOverviewBoxCom from '../../components/CampusOverviewBoxCom/index.vue'
import CampusOverviewContentCom from '../../components/CamppusOverviewContentCom/index.vue'
import CampusOvuerviewBottomCom from '../../components/CampusOvuerviewBottomCom/index.vue'
import LeftTop_topCom from '../../components/LetfTop_topCom/index.vue'
import RightTop_topCom from '../../components/RightTop_topCom/index.vue'
import CampusOverviewRabbar from '../../components/CampusOverviewRabbar/index.vue'
import CampusOverviewLeft from '../../components/CampusOverviewLeft/index.vue'
import CampusOverviewRight from '../../components/CampusOverviewRight/index.vue'
import Rhcart1 from '../../components/Ehcart1/index.vue'
import Ehcart from '../../components/Ehcart/index.vue'
import Ehcart2 from '../../components/Ehcart2/index.vue'
import animationCom1 from '../../components/animationCom1/index.vue'
import TopCom from '../../components/CampusOverviewTopCom/index.vue'
import { onMounted,reactive } from 'vue'
import axios from 'axios'
import TemperatureEcharts from '../../components/TemperatureEcharts/index.vue'
let aboutTemperature=reactive({
  temperature:"",//温度
  windpower:'',//风力
  humidity:"",//湿度
  nighttemp:"",//夜晚温度
  daypower:"",//风力
})
onMounted(()=>{
  const key = 'ff49151266390899e6b1c15afcbae82b'
 axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=110000&extensions=all`).then(res=>{


    aboutTemperature.temperature=res.data.forecasts[0].casts[0].daytemp
    aboutTemperature.windpower=res.data.forecasts[0].casts[0].wind_power
    aboutTemperature.humidity=res.data.forecasts[0].casts[0].humidity
    aboutTemperature.nighttemp=res.data.forecasts[0].casts[0].nighttemp
    aboutTemperature.daypower=res.data.forecasts[0].casts[0].day_power
 }).catch(err=>{
  console.log(err)
 })
})
const location = window.location.href

</script>
<style scoped>
#CampusOcerviewDiv {
  background-image: url(../../../img/pageBg.png);
  background-repeat: no-repeat;
  /* 防止图像重复 */
  background-size: 100% 100%;
  /* 图像覆盖整个元素 */

}

#letfTop,
#rightTop {
  width: 80%;
  height: 50%;
  /* margin-top: 12%; */

}

#rightTop {
  margin-left: 10%;
}

#leftBottom,
#rightBottom {
  width: 80%;
  height: 50%;
  margin-bottom: 10%;

}

#rightBottom {
  margin-left: 10%;
}

#letfTop_bottom,
#leftBottom_bottom,
#rightTop_bottom,
#rightBottom_bottom {
  background-color: rgb(12, 29, 95);

}
</style>
